<template>
  <a-menu
    mode="horizontal"
    :selected-keys="[currentRoute]"
    class="navigation-menu"
  >
    <a-menu-item key="/">
      <router-link to="/">
        <home-outlined />
        首页
      </router-link>
    </a-menu-item>
    <a-menu-item key="/todo">
      <router-link to="/todo">
        <check-square-outlined />
        TODO管理
      </router-link>
    </a-menu-item>
  </a-menu>
</template>

<script>
import { HomeOutlined, CheckSquareOutlined } from '@ant-design/icons-vue'

export default {
  name: 'Navigation',
  components: {
    HomeOutlined,
    CheckSquareOutlined
  },
  computed: {
    currentRoute() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.navigation-menu {
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navigation-menu :deep(.ant-menu-item) {
  padding: 0 20px;
}

.navigation-menu :deep(.ant-menu-item a) {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.navigation-menu :deep(.ant-menu-item-selected a) {
  color: #1890ff;
}

.navigation-menu :deep(.ant-menu-item:hover a) {
  color: #1890ff;
}
</style>
